<script setup>
import {
  onMounted,
  nextTick,
  ref,
  reactive,
  watch,
  computed,
  watchEffect,
} from "vue";
import { login, getUserPermission, searchRoleListByLogin, getAllRole } from "../network/net.js";
// 引入路由
import { useRouter } from "vue-router";
import chun from "../stores/chun.js";
import { bmInfo, bm } from "../stores/chun.js";
// Unlock
import { User, Unlock, View, Hide, Lock } from "@element-plus/icons-vue";
import { Encrypt } from '@/module/Secret.js'

let checkedRemPw = ref(false);
let allHeight = ref(0);
// 屏幕宽度
let allWidth = ref(0);
onMounted(() => {
  // 监听屏幕宽度
  allWidth.value = document.documentElement.clientWidth;

  window.onresize = () => {
    allWidth.value = document.documentElement.clientWidth;
  };
  // 获取本地存储的用户信息
  let userInfo = localStorage.getItem("userInfo");

  let data = JSON.parse(userInfo);
  // 填充form
  form.username = data?.username;
  form.password = data?.password;
  // if (userInfo) {
  //     chun.userInfo = JSON.parse(userInfo)
  //     let { role } = chun.userInfo
  //     if (role == 'jh') {
  //         router.push('/input')
  //     } else {
  //         router.push('/info')
  //     }
  // }

  // 获取title标签
  let title = document.querySelector("title");
  // 内容更改为秦山核电海洋预警报信息服务系统
  title.innerHTML = "海洋预警专题服务系统";
  // 获取页面高度
  allHeight.value = document.documentElement.clientHeight;
  // 监听页面高度变化
  window.addEventListener("resize", () => {
    allHeight.value = document.documentElement.clientHeight;
  });
});

// 路由实例
const router = useRouter();
const form = reactive({
  username: "",
  password: "",
});

const handleLogin = (value) => {
  // 跳转到首页
  router.push("/home");
  return

  let pstr = Encrypt(form.password,);

  login({
    username: form.username,
    password: pstr,
  })
    .then((res) => {

      if (res.data.code == 200) {
        chun.userInfo = {
          username: form.username,
          password: form.password,
        };

        bmInfo.value = res.data.data['DepartmentInformation'].filter(item => item.status == 1);
        if (bmInfo.value.length > 1) {
          bm.value = bmInfo.value[1]?.name
        } else {
          bm.value = bmInfo.value[0]?.name
        }

        // 存储到本地
        sessionStorage.setItem("bmInfo", JSON.stringify(bmInfo.value));
        sessionStorage.setItem("bm", bm.value);

        localStorage.setItem("loginId", res.data.data['LoginUserInformation'].loginId);
        if (checkedRemPw.value) {
          // chun.userInfo存到本地
          localStorage.setItem("userInfo", JSON.stringify(chun.userInfo));
        } else {
          localStorage.removeItem("userInfo");
        }

        sessionStorage.setItem("token", res.data.data['LoginUserInformation'].tokenValue);
        // router.push('/home')
        let token = res.data.data['LoginUserInformation'].tokenValue;


        // let roleP = []
        // roleP.push(searchRoleListByLogin(token))
        // roleP.push(getAllRole(token))
        // Promise.all(roleP).then((res) => {
        //   if (res[0].data.code == 200 && res[1].data.code == 200) {
        //     let rightList = res[1].data.data.records.find(item => item.ref == res[0].data.data[0])
        //     localStorage.setItem("rightInfo", JSON.stringify(rightList));
        //   }
        // });

        if (allWidth.value > 800) {

          if (value == "back") {
            // 获取权限
            getUserPermission(token).then((res) => {
              if (res.data.data['LoginUserInformation'].includes("system")) {
                // 拥有后台权限
                router.push("/sys");
              } else {
                alert("无此权限，请联系管理员");
              }
            });
          } else {

            router.push("/web");
          }
        } else {
          router.push("/home");
        }

        // 获取title标签
        // let title = document.querySelector('title')
        // title.innerHTML = '秦山核电海洋预警报信息服务系统'

        // let { role } = chun.userInfo
        // if (role == 'jh') {
        //     router.push('/input')
        // } else {
        //     router.push('/info')
        // }
      } else {
        alert("用户名或密码错误");
      }
    })
    .catch((err) => { });
};

const isPass = ref(false),
  bySty = reactive({
    backgroundImage: "url(./img/by_zuo.png), url(./img/by_you.png)",
  });
const passBlur = () => {
  isPass.value = false;
},
  passFocus = () => {
    isPass.value = true;
    // 强制英文输入法
    //
  };

const isSee = ref(false);
const seeClick = (e) => {
  // 阻止冒泡
  e.stopPropagation();
  isSee.value = !isSee.value;
};
</script>

<template>
  <div id="login">
      <section class="login_s1">
        <span>红沿河核电</span>
        <!-- <span>专题服务系统</span> -->
      </section>
      <section class="login_s2">
        <el-input class="iii" v-model="form.username" placeholder="请输入用户名" :prefix-icon="User" autocomplete="off"
          name="username"></el-input>
        <el-input class="iii" v-model="form.password" placeholder="请输入密码" :prefix-icon="Lock" show-password></el-input>
        <button class="iii iiib" @click="handleLogin">
          <span> 登录 </span>
        </button>
        <el-checkbox v-model="checkedRemPw" label="记住密码" size="large" />
      </section>

      <div id="copyright" v-show="allHeight > 500">版权所有：红沿河核电</div>
  </div>
</template>

<style lang="less" scoped>
#login {
  // height: 100vh;
  min-height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  padding: 70px 25px 0 25px;
  background: url("../assets/img/qqbg.png") no-repeat;
  background-size: 100% 100%;

  :deep(.iii) {
    padding: 0 !important;

    .el-input__wrapper {
      background-color: #f0f0f9 !important;
      font-size: 16px;
    }
  }

  input,
  input:focus,
  textarea,
  textarea:focus,
  select,
  select:focus {
    font-size: 16px !important;
  }

  .login_s1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    margin-bottom: 30px;

    img {
      position: absolute;
      left: 20px;
    }

    span {
      overflow-wrap: break-word;
      color: rgba(51, 51, 51, 1);
      font-size: 28px;
      // font-family: SourceHanSansCN-Medium;
      font-family: "aliph500";
      font-weight: 500;
      text-align: left;
      white-space: nowrap;
      line-height: 41px;
    }

    .lrd {
      background-color: rgba(10, 188, 167, 1);
      margin: 12px 0 13px 0;
      padding: 3px 5px 3px 5px;

      span {
        height: 12px;
        overflow-wrap: break-word;
        color: rgba(255, 255, 255, 1);
        font-size: 12px;
        font-family: PangMenZhengDao;
        font-weight: normal;
        text-align: left;
        white-space: nowrap;
        line-height: 14px;
      }
    }
  }

  .login_s2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    :deep(.el-input__wrapper) {
      background-color: #f6f6f8;
      border: none;
      border-radius: 7px;
    }

    .iii {
      width: 100%;
      height: 50px;
      margin: 15px 0;
      padding: 0 10px;
      border: none;
      border-radius: 7px;
      box-sizing: border-box;
    }

    .iiib {
      span {
        width: 32px;
        height: 24px;
        font-family: SourceHanSansCN, SourceHanSansCN;
        font-weight: 500;
        font-size: 16px;
        color: #ffffff;
        line-height: 24px;
        // text-align: left !important;
        text-align: center;
        font-style: normal;
      }

      background-color: #416ac4;
      margin-top: 30px;
    }
  }

  #copyright {
    position: fixed;
    bottom: 20px;
    width: calc(100% - 50px);
    text-align: center;
    font-size: 16px;
    color: #666;
  }

  #login_right {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    // 居中
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url(https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg) repeat 0 0;
    background-color: #f0f0f9;

    #login_item {
      position: relative;
      height: 400px;
      width: 500px;
      // border: 1px solid var(--el-color-primary);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
      border: 1px solid rgba(235, 235, 235, 0.38);
      border-radius: 4px;
      // background-image: url('/img/zy_zuo.png'), url('/img/zy_you.png');
      // background-repeat: no-repeat, no-repeat;
      // background-position: 0 100%, 100% 100%;
      // background-size: 20%;
      padding: 50px;

      .login_welcom {
        // height: 130px;
        // line-height: 130px;
        font-size: 27px;
        text-align: center;
        letter-spacing: 3px;
        animation: logoAnimation 0.5s ease;
        // animation-delay: .3s;
        color: var(--el-text-color-primary);
        font-family: "aliph500";
        margin-bottom: 30px;
      }

      @keyframes logoAnimation {
        0% {
          opacity: 0;
          transform: translateY(-50px);
        }

        100% {
          opacity: 1;
          transform: translateY(0);
        }
      }

      .login_change {
        margin-top: 10px;
        margin-bottom: 15px;
        width: 100%;
        display: flex;

        .change_item {
          flex: 1;
          text-align: center;
          font-size: 16px;
          letter-spacing: 3px;
          cursor: pointer;
          color: var(--el-text-color-primary);
          font-family: "钉钉进步体";
          animation: logoAnimation 0.5s ease;
          transition: opacity 0.3s ease;
        }
      }

      .login_form {
        .form_item {
          margin-bottom: 20px;

          .login_input {
            height: 40px;
          }
        }
      }

      .login_login {
        height: 100px;
        text-align: center;
        margin-top: 20px;

        .el-button {
          margin-top: 5px;
          width: 100%;
          height: 40px;
          line-height: 40px;
          font-size: 16px;
          letter-spacing: 3px;
          animation: logoAnimation 0.5s ease;
        }
      }

      #ht {
        position: absolute;
        bottom: 20px;
        right: 20px;
        font-size: 16px;
        color: #666;
        cursor: pointer;
        // 边框 阴影
        border: 1px solid rgba(235, 235, 235, 0.38);
        border-radius: 7px;
        padding: 5px 10px;
        background-color: #f0f0f9;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        font-family: "deyi";
        // 点击效果
        transition: all 0.2s;
        user-select: none;

        &:hover {
          background-color: #4a90e2;
          color: #fff;
        }

        &:active {
          // 0.9
          transform: scale(0.9);
        }
      }
    }

    // @media screen and (max-width: 3200px) {
    //   position: absolute;
    //   top: 50%;
    //   left: 50%;
    //   transform: translate(-50%, -50%);
    //   width: 90%;

    //   #login_item {
    //     border: none;
    //     box-shadow: none;
    //     padding: 20px;
    //   }
    // }
  }
}
</style>
